<template>
	<view class="weui-grids home-grid">
		<block v-for="(item,index) in grids" :key="index">
			<view class="weui-grid grid-item" @click="onItemClick(item.title)">
				<image class="grade-image" mode="aspectFill" :src="item.image"></image>
				<view class="weui-grid__label grid-item_label">{{item.grade_name}}</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		gradeDetail
	} from '@/router.js'
	export default {
		data() {
			return {
				grids: []
			}
		},
		onLoad() {
			this.getGradeList()
		},
		methods: {
			//item点击事件
			onItemClick(title) {
				console.log("onItemClick", title)
				uni.navigateTo({
					url: gradeDetail + `?title=${title}`
				})
			},
			getGradeList() {
        this.$tools.showLoading()
				uniCloud.callFunction({
					name: 'database',
					data: {
						collection: 'poetry',
						type: 'grade'
					},
					success: (res) => {
            uni.hideLoading()
						console.log(res)
						let result = res.result.data
						if (result && result.length > 0) {
							let grids = result[0].grids
							this.grids = grids
						}
					},
				})
			}
		}
	}
</script>

<style>
	.home-grid {
		margin: 10px 15px;
	}

	.grid-item {
		width: 25%;
		padding: 5px 5px;
		text-align: center;
		border-right: 1px solid #e9e7ef;
		border-bottom: 1px solid #e9e7ef;
	}

	.grade-image {
		width: 76px;
		height: 108px;
    background-color: #eaeef1;
	}

	.grid-item_label {
		margin-top: 0px;
		font-size: 13px;
	}
</style>
